import React,{useState} from 'react' ;
import ModalTemplate,{useModal,OptionBtnType} from './index'
import {Radio} from 'apusic-ui' ;

const Example =(props: any)=>{
   const [size, setSize] = useState("middle");
  const [modalState,{show,hide,setModalState}] = useModal({
    // isFetching:false, // 非必要无需传
    visible:false,
    title:"对话框标题",
    btnTitle:"打开对话框",
    size:"middle"
    // btnType:OptionBtnType.TEXT, // 不传默认重要按钮
    // disabled:false, // 非必要无需传
    /* btnStyle:{
      padding:0,
      lineHeight:"18px"
    } */ // 非必要无需传
  })

  function handleOnClick(){

  }
  function fetchParams(){

  }
  function onChange(e:any){
    setSize(e.target.value);
    setModalState((modalState:any)=>({
        ...modalState ,
        size:e.target.value ,
      })) ;
  }
  return (
    <div style={{padding:"30px"}}>
        <div style={{marginBottom:"10px"}}>对话框大小：</div>
        <Radio.Group onChange={onChange} value={size}>
            <Radio value={"small"}>小</Radio>
            <Radio value={"middle"}>中</Radio>
            <Radio value={"large"}>大</Radio>
        </Radio.Group>
        <div style={{marginBottom:"20px"}}/>
        <ModalTemplate
        modalState={modalState}
        show={show}
        hide={hide}
        setModalState={setModalState}
        fetchData={fetchParams}
        onOk={()=>{
            handleOnClick()
        }}
        content={
            <div style={{height:"160px",textAlign:"center",lineHeight:"160px",color:"#666"}}>
                这里填充对话框具体内容
            </div>
        }
        />
    </div>
  )
}

export default Example;